<template>
  <div class="detail-iot-container">
    <el-card body-style="padding:10px;">
      <div class="flex-wrap">
        <el-form :inline="true" :model="formInline" style="margin-bottom: -20px">
          <el-form-item label="设备名称">
            <el-input v-model.trim="formInline.name" placeholder="设备名称" @keydown.native.enter="onSubmit" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select v-model="formInline.type" placeholder="请选择类型" clearable>
              <el-option v-for="item in iotTypeOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :loading="queryStatus">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="flex-item-right" style="flex:1">
          <el-button type="danger" :disabled="iotDeleteStatus" plain @click="handleClickBatchDeleteDevice">解绑设备</el-button>
          <el-button type="primary" plain @click="handleClickAddDevice">绑定设备</el-button>
        </div>
      </div>
    </el-card>
    <el-card :style="{marginTop:'10px'}" v-loading="tableLoading">
      <el-table
        ref="iotMultipleTable"
        :data="iotTableData"
        style="width: 100%;border:1px solid #e0e0e0"
        :header-cell-style="tableHeaderColor"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          :index="index => (index + 1 + (page.pageNum - 1) * page.pageSize)"
          label="序号"
          width="50"
        />
        <el-table-column
          prop="name"
          label="设备名称">
        </el-table-column>
        <el-table-column
          prop="model"
          label="设备型号">
        </el-table-column>
        <el-table-column
          prop="enterpriseName"
          label="企业名称">
        </el-table-column>
        <el-table-column
          label="设备位置">
          <template slot-scope="scope">
            <div>
              {{scope.row.locationEw}}EW,{{scope.row.locationNs}}NS
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="设备类型">
        </el-table-column>
        <el-table-column
          width="80"
          label="状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-show="scope.row.untitled==1">异常</el-tag>
            <el-tag type="success" v-show="scope.row.untitled!=1">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="accessTime"
          label="接入时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              style="color:#409EFF"
              plain
              @click="handleClickDetailDevice(scope.row)"
            >详情
            </el-button>
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="text"-->
<!--              plain-->
<!--              style="color:#009865"-->
<!--              @click="handleClickUpdateDevice(scope.row)"-->
<!--            >修改-->
<!--            </el-button>-->
            <el-popconfirm
              title="确定要解绑选中的设备吗？"
              @confirm="handleClickDeleteDevice(scope.row)"
            >
              <el-button
                size="mini"
                type="text"
                plain
                style="color:red"
                slot="reference"
              >删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex-wrap" style="align-items: center;justify-content: center">
        <page-plugin
          v-show="true"
          :pages="page.pages"
          :total="page.total"
          label="物联网设备"
          :page.sync="page.pageNum"
          :limit.sync="page.pageSize"
          @changePageNum="changePageNum"
        />
      </div>
    </el-card>
    <iot-add ref="iotAddDialog" @updateTable="getTableList"/>
    <iot-dialog ref="iotDetailDialog" @updateTable="getTableList"/>
  </div>
</template>
<script>
    import {
        iotTypeList,
        deleteFacility,
        editUnBindingMass,
        queryFacilityList
    } from '@/api/material'
    import pagePlugin from "@/components/page-plugin"
    import iotAdd from "./iotAdd";
    import iotDialog from "./iotDialog"
    export default {
        components: {
            'page-plugin': pagePlugin,
            'iot-dialog': iotDialog,
            'iot-add': iotAdd
        },
        data() {
            return {
                iotPubSub: null,
                queryStatus:false,
                tableLoading: false,
                mainCardHeight: 0,
                iotTypeOptions:[],
                formInline: {
                    name: '',
                    type: ''
                },
                page: {
                    pages: 1,
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                iotDeleteStatus: false,
                iotCheckList:[],
                iotTableData: []
            }
        },
        watch: {
            iotCheckList: {
                handler(n, o) {
                    this.iotDeleteStatus = n && n.length>0 ? false : true
                },
                immediate: true
            }
        },
        created() {
            this.getTypeList()
        },
        methods: {
            onSubmit() {
                this.page.pageSize = 10
                this.page.pageNum = 1
                this.queryStatus = true
                this.getTableList()
            },
            getTableList(){
                this.iotTableData = []
                this.page = {
                    pages: 1,
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                }
                this.tableLoading = true
                const info = JSON.parse(sessionStorage.getItem("massifDetails"))
                queryFacilityList(this.formInline.name, this.formInline.type, this.page.pageSize, this.page.pageNum, info.id).then(response=>{
                    this.queryStatus = false
                    this.tableLoading = false
                    const res = response.data
                    if(res.code==200){
                        this.iotTableData = res.data.list
                        this.page.total = res.data.total
                        this.page.pageSize = res.data.pageSize
                        this.page.pageNum = res.data.pageNum
                        this.page.pages = res.data.pages
                    }else{
                        this.$message({type:"error",message: res.msg})
                    }
                }).catch(err=>{
                    this.queryStatus = false
                    this.tableLoading = false
                })
            },
            async getTypeList(){
                const response = await iotTypeList()
                const {code, rows, msg} = response.data
                if(code==200){
                    this.iotTypeOptions = rows
                }else{
                    this.$message({type:"error",message: msg})
                }
                console.log("getTypeList=======>", code)
                this.getTableList()
            },
            async deleteFacilityByIds(ids){
                const loading = this.$load(this)
                const info = JSON.parse(sessionStorage.getItem("massifDetails"))
                const response = await editUnBindingMass(info.id,ids)
                const {code, msg} = response.data
                if(code==200){
                    this.getTableList()
                    this.$message({type:"success", message: msg})
                }else{
                    this.$message({type:"error", message: msg})
                }
                loading.close()
            },
            changePageNum(val) {
                console.log("修改页码时触发",val)
                this.page.pageNum = val.page
                this.getTableList()
            },
            handleClickBatchDeleteDevice(){
                this.$confirm('此操作将永久与解绑选中设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const ids = this.iotCheckList.map(item=>{
                        return item.id
                    })
                    this.deleteFacilityByIds(ids.toString())
                }).catch(() => {});
            },
            handleClickDetailDevice(row){
                this.$refs.iotDetailDialog.show(true,'detail', this.iotTypeOptions, {row})
            },
            handleClickUpdateDevice(row){
                this.$refs.iotDetailDialog.show(true,'update', this.iotTypeOptions, {row})
            },
            handleClickDeleteDevice(row){
                console.log(row)
                this.deleteFacilityByIds(row.id)
            },
            handleClickAddDevice(){
                const info = JSON.parse(sessionStorage.getItem("massifDetails"))
                this.$refs.iotAddDialog.show(info.id)
            },
            handleSelectionChange(val) {
                this.iotCheckList = val
            },
            // 设置表头样式
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                return 'background-color: #009865;color: #000;font-weight: 500;'
            },
            // 设置斑马样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'columns-row-a';
                } else if (rowIndex % 2 === 1) {
                    return 'columns-row-b';
                }
            }
        }
  }
</script>
<style>
  .el-table .columns-row-a {
    background: #f1faf7;
  }

  .el-table .columns-row-b {
    background: #ffffff;
  }
</style>
<style scoped>
  .flex-wrap {
    display: flex;
    align-items: center;
  }

  .flex-item-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .detail-iot-container >>> .el-table__header{
    background: #009865;
  }
</style>
